<style>
#tools {
  border: 1px solid;
  border-radius: 12px;
  box-shadow: 2px 2px 5px #bbb;
  margin: 5px;
}

.ui-form-item {
  margin-bottom: 5px;
  margin-top: 5px;
}

#editor {
  border: 1px solid;
  border-radius: 12px;
  box-shadow: 2px 2px 5px #bbb;
  font-size: 20px;
  margin: 5px;
}

.parent-container {
  display: flex;
  flex-direction: column;
  height: 30vh; /* 必须定义高度 */
}
</style>

<template>
  <div class="app-container">
    <div id="tools" style="margin:5px">
        <el-form class="ui-form-item" ref="form" :model="sqlForm" label-width="180px">
          <el-form-item label="数据来源" prop="dataSource">
              <el-select v-model="sqlForm.dataSource"
                         placeholder="请选择数据来源"
                         clearable
                         filterable
                         @change="doGetTablesColsSource"
              >
                <el-option
                  v-for="i in datasourceList"
                  :key="i.id"
                  :label="i.value"
                  :value="i.value"
                />
              </el-select>
            <el-form-item label="数据去向" prop="dataDestination">
                <el-select v-model="sqlForm.dataDestination"
                           placeholder="请选择数据去向"
                           clearable
                           filterable
                           @change="doGetTablesColsDestination"
                >
                  <el-option
                    v-for="i in datasourceList"
                    :key="i.id"
                    :label="i.value"
                    :value="i.value"
                  />
                </el-select>
            </el-form-item>
            <el-form-item label="数据表名" prop="tableName">
                <el-select v-model="sqlForm.tableName"
                           placeholder="请选择数据表"
                           clearable
                           filterable
                           @focus="doGetTableList"
                           @blur="tableNameList=null"
                >
                  <el-option
                    v-for="i in tableNameList"
                    :key="i"
                    :label="i"
                    :value="i"
                  />
                </el-select>
            </el-form-item>
              <el-button :disabled="sqlForm.sqlText===null||sqlForm.sqlText===''" align="right" type="primary"
                         icon="el-icon-search"
                         size="mini" @click="doSave">保存
              </el-button>
          </el-form-item>
        </el-form>
    </div>

    <div v-loading="loading"
         class="parent-container"
         id="editor">
      <monaco-editor :tables="monacoTables"
                     ref="monacoEditor"
                     v-model="sqlForm.sqlText"
                     language="sql"
                     theme="vs"
                     :key="editorRefreshKey"
      />
    </div>

  </div>
</template>

<script>
import {findSqlPageDataSourceList} from "@/api/websql/datasource";
import MonacoEditor from "@/components/MonacoEditor";
import {findTableFieldByDatabase} from "@/api/websql/sqlManager";

export default {
  components: {MonacoEditor},
  name: "EtlAdd",
  data() {
    return {
      editorRefreshKey: 0,
      loading: false,
      monacoTables: null,
      sqlForm: {
        dataBaseName: null,
        dataSource: null,
        dataDestination: null,
        tableName: null,
        sqlText: null,
        sourceNameList:null,
        destinationNameList:null,
      },
      datasourceList: null,
      tableNameList:null,

    }
  },
  created() {
    this.monacoTables = null;
    findSqlPageDataSourceList().then(res => {
      this.datasourceList = res.data;
    })
  },
  watch: {},
  methods: {
    getIntersection(arr1, arr2) {
      const set1 = new Set(arr1);
      const set2 = new Set(arr2);
      return [...set1].filter(item => set2.has(item));
    },
    doSave(){
      console.log(`--doSave`);
      console.log(this.sqlForm);
      console.log(`--------`);
    },
    doGetTableList(){
      this.tableNameList=this.getIntersection(this.sqlForm.sourceNameList,this.sqlForm.destinationNameList);
      console.log(`------doGetTableList`)
      console.log(this.tableNameList)
      console.log(`--------------------`)
    },
    doGetTablesColsSource(data) {
      this.doGetTablesCols(data,'source')
    },
    doGetTablesColsDestination(data) {
      this.doGetTablesCols(data,'destination')
    },
    async doGetTablesCols(data,type) {
      this.sqlForm.sqlText = '';
      this.$refs.monacoEditor.editor.setValue("");
      if (data) {
        this.loading = true;
        this.monacoTables = null;
        const res = await findTableFieldByDatabase(data);
        this.monacoTables = Object.keys(res.data);
        if (type==='source')this.sqlForm.sourceNameList=this.monacoTables;
        else if (type==='destination')this.sqlForm.destinationNameList=this.monacoTables;
        this.loading = false;
      }
    },
  }
}
</script>
